<template>
  <div>
    <Button type="primary" @click="showDialog = true">显示自定义弹窗</Button>
    <Dialog v-model="showDialog" :title="dialogTitle" :message="dialogMessage">
      <!-- 自定义内容插槽 -->
      <slot v-if="hasCustomContent"></slot>
      <template #footer>
        <!-- 自定义底部按钮 -->
        <Button round block type="primary" @click="onConfirm">确认</Button>
        <Button round block type="danger" @click="onCancel">取消</Button>
      </template>
    </Dialog>
  </div>
</template>

<script setup>
import {ref, watch} from 'vue';
import { Dialog, Button } from 'vant';

// 响应式状态
const showDialog = ref(false);
const dialogTitle = ref('自定义弹窗');
const dialogMessage = ref('这是一个自定义弹窗内容。');
const hasCustomContent = ref(false);

watch(showDialog, (nv, ov) => {
  console.log(nv, ov)
})

// 方法
const onConfirm = () => {
  showDialog.value = false;
  // 确认按钮点击后的逻辑处理
  console.log('点击了确认按钮');
};

const onCancel = () => {
  showDialog.value = false;
  // 取消按钮点击后的逻辑处理
  console.log('点击了取消按钮');
};

// 提供给模板的属性和方法
// 在 <script setup> 中，不需要显式返回，属性和方法会自动暴露给模板
</script>